/**
 * Created by Administrator on 2016/8/10 0010.
 */
var MyComponent = Vue.extend({
  template: [
    '<table class="table table-bordered table-condensed table-striped" style="word-break:break-all">',
    '<br/>',
    '<thead>',
    '<tr class="info" >',
    '<th>选择</th> <th>唯一标识</th> <th>负责人</th> <th>描述</th> <th>截止期</th> <th>状态</th> <th>操作</th>',
    '</tr>',
    '</thead>',
    '<tbody>',
    '<tr v-for="item in items" track-by="$index" >',
    '<td><input type="checkbox" v-model="item.selected"></td>',
    '<td width="18%"><a href="#" >{{item.id}} </a></td>',
    '<td width="5%">{{item.principal}}</td>',
    '<td width="50%">{{item.description}}</td>',
    '<td width="12%">{{item.deadline}}</td>',
    '<td v-if="item.state==0">未完成</td>',
    '<td v-if="item.state==1" >执行中</td>',
    '<td v-if="item.state==9">已完成</td>',
    '<td>',
    '<a href="#" v-on:click="onRemoveItem(item,$event)"> 删除 </a> |',
    '<a href="#" v-on:click="onEditItem(item,$event)"> 编辑 </a>',
    '</td>',
    '</tr>',
    '</tbody>',
    '</table>'].join(''),
  data: function () {
    return {
      result: null
    };
  },
  props: {
    items: []
  },
  ready: function () {
  }
  /*
   props: ['msg', 'items', 'properties']
   */
})

// 注册
Vue.component('itemlist', MyComponent)

var AppService = {
  urlroot: "http://euvee.vicp.co/rest/task/",
  init: function () {
    Vue.http.options.root = this.urlroot;
  },
  find: function (success_callback, error_callback) {
    var url = this.urlroot;
    Vue.http.get(url).then(success_callback, error_callback)
  }
}
var svc = Object.create(AppService);

var vm = new Vue({
  el: '#res',
  data: {
    msg: 'hello123',
    items: [],
    properties: [
      "id",
      "description",
      "deadline",
      "state",
      "principal"
    ]
  },
  methods: {
    //高级搜索
    _find: function () {
      var self = this;
      svc.find(function (response) {
        self.$set('items', response.data)
      }, function (response) {
        alert("Probably failed to connect the backend server! Pls check your server status!" + response.status);
      });
    }
  },
  ready: function () {
    this._find();
  }
})
// 创建根实例
/*new Vue({
 el: '#res',
 data: {
 // result: items
 // items: []
 },
 methods: {},
 ready: function () {
 }
 })*/
